
<template>
  <div>
    <!-- 中部 路由router-view 区域 -->
    <div id="carousel-example-generic" class="carousel slide col-md-8" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators" ref="ols">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox" ref="items">
        <div class="item active">
          <img src="/src/images/book.jpg" alt="book" />
          <div class="carousel-caption">Book</div>
        </div>
        <div class="item">
          <img src="/src/images/eye.jpg" alt="eye" />
          <div class="carousel-caption">Eye</div>
        </div>
        <div class="item">
          <img src="/src/images/rain.jpg" alt="rain" />
          <div class="carousel-caption">Rain</div>
        </div>
      </div>

      <!-- Controls -->
      <a
        class="left carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="prev"
      >
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="right carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="next"
      >
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <br>
    <div class="row funcList col-md-3 col-md-offset-1">
        <div class="col-md-12 col-sm-4 col-xs-4 func oneRow">
            <div class="col-md-6 firstfunc">
              <router-link to="/App/HomePage/NewsList" class="glyphicon glyphicon-map-marker"></router-link>
              <br>新闻咨询
            </div>
            <div class="col-md-6">
              <router-link to="/App/HomePage/PictureShare" class="glyphicon glyphicon-picture"></router-link>
              <br>图片分享
            </div>
        </div>
        <div class="col-md-12 col-sm-4 col-xs-4 func twoRow">
            <div class="col-md-6">
              <router-link to="/App/HomePage/BuyGoods" class="glyphicon glyphicon-shopping-cart"></router-link>
              <br>商品购买
            </div>
            <div class="col-md-6">
              <router-link to="/App/HomePage/Comment" class="glyphicon glyphicon-pencil"></router-link>
              <br>留言反馈
            </div>
        </div>
        <div class="col-md-12 col-sm-4 col-xs-4 func triRow">
            <div class="col-md-6">
              <router-link to="/App/HomePage/Video" class="glyphicon glyphicon-film"></router-link>
              <br>视频专区
            </div>
            <div class="col-md-6">
              <router-link to="/App/HomePage/LinkMe" class="glyphicon glyphicon-th-list"></router-link>
             <br>联系我们
           </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    data() {
        return {
            // lunbotuList: []
        }
    },
    created() {
        // this.getLunbotu()
    },
    methods: {
        // getLunbotu() {
        //     this.$http.get("http://www.liulongbin.top:3005/api/getlunbo").then(result => {
        //         if(result.body.status === 0) {
        //             this.lunbotuList = result.body.message
        //         } else {
        //             alert("error")
        //         }
        //     })
        // }
    }
}

</script>

<style lang="scss" scoped>

.funcList {
    .func{
        text-align: center;
        margin-bottom: 36px;
        .glyphicon{
          color: white;
          font-size: 400%;
          border-radius: 50%;
        } 
    }
    .oneRow{
        :nth-child(1) .glyphicon{
            background: rgb(119, 235, 42);
        }
        :nth-child(2) .glyphicon{
            background: rgb(255, 0, 0);
        }
    }
    .twoRow{
        :nth-child(1) .glyphicon{
            background: rgb(77, 65, 253);
        }
        :nth-child(2) .glyphicon{
            background: rgb(101, 228, 250);
        }
    }
    .triRow{
        :nth-child(1) .glyphicon{
            background: rgb(255, 0, 0);
        }
        :nth-child(2) .glyphicon{
            background: rgb(255, 53, 70);
        }
    }
    
}
</style>